<template>
  <div>
    <div class="nav van-hairline--bottom">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </div>
    <div class="fbox"></div>
    <div class="mian">
      <van-cell v-for="item in firdList" :key="item.listID">
        <template #title>
          <div class="left-item">
            <img :src="iconUrl + item.userImage" alt="" />
            <p>{{ item.user }}</p>
          </div>
        </template>
        <template #right-icon>
          <div>
            <van-button
              @click="sendMsg(item.id, item.user)"
              class="btnadd"
              round
              type="info"
              >发消息</van-button
            >
          </div>
        </template>
      </van-cell>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      firdList: [],
      value: "",
    };
  },
  created() {
    this.getFriendList();
  },
  methods: {
    onSearch() {},
    onCancel() {
      this.$router.push("/Message");
    },
    async getFriendList() {
      const { data: res } = await this.$http.get("getFriendList", {
        params: { id: this.emailLogin[0].userID },
      });
      console.log(res);
      this.firdList = res.data;
    },
    sendMsg(val, name) {
      this.$store.commit("setfriID", val);
      this.$store.commit("setchatName", name);
      this.$router.push("/chatNew");
    },
  },
  computed: {
    ...mapState(["emailLogin"]),
  },
};
</script>
<style lang="less" scoped>
.nav {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 1200;
}
.left-item {
  display: flex;
  align-items: center;
  p {
    font-family: PingFangSC-Regular;
    font-size: 18px;
    color: #272832;
    letter-spacing: -0.62px;
    margin-left: 16px;
  }
  img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
}
.btnadd {
  width: 60px;
  height: 26px;
  font-size: 14px;
  padding: 0 6px;
  background: #ffe431;
  border: 1px solid #ffe431;
  color: #272832;
  letter-spacing: -0.41px;
}
</style>